<template>
  <nav-bar-func title="我的信息"/>
  <el-tabs tab-position="left" style="height: 100%" :before-leave="switchPane">
    <el-tab-pane label="我的信息">
      <profile-info/>
    </el-tab-pane>

    <el-tab-pane label="后台管理" v-if="showManager">
      <el-tabs style="height: 100%">
        <el-tab-pane label="用户信息">
          <user-list/>
        </el-tab-pane>
        <el-tab-pane label="标签">
          <Label/>
        </el-tab-pane>
        <!-- <el-tab-pane label="角色信息">
          <role/>
        </el-tab-pane> -->
      </el-tabs>
    </el-tab-pane>

    <el-tab-pane label="写文章">
      <search
          :hasBtn="true"
          :placeholder="'文章标题'"
          :width="'80%'"
          :prefixIcon="editIcon"
          @inputText="inputText"
          @submit="submit"
          :icon="Upload"
          :btnText="'发布'"
      />
          <el-select v-model="value" placeholder="Select">
            <el-option
              v-for="item in tags"
              :key="item.Id"
              :label="item.Name"
              :value="item.Name"
            />
          </el-select>
      <editor @articleText="articleText"/>
    </el-tab-pane>

    <el-tab-pane label="我的文章">
      <time-line/>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import {useStore} from 'vuex'
import { ElMessageBox, ElMessage } from 'element-plus'
import {Edit, Upload} from '@element-plus/icons-vue'
import {onActivated, onMounted, reactive, ref} from "vue"
import {POSTA} from "@/api/index.ts"
import localstorage from '@/tools/localstorage';
import {getTags} from '@/datas/taglist'

import NavBarFunc from "@/components/navbar/NavBarFunc.vue";
import ProfileInfo from '@/views/profile/profileInfo/ProfileInfo.vue'
import TimeLine from "@/views/profile/timeline/TimeLine.vue"
import Editor from '@/components/editor/Editor.vue'
import Search from "@/components/search/Search.vue"
import UserList from "@/views/profile/userManager/UserList.vue";
import Permission from "@/views/profile/userManager/Permission.vue"
import Role from "@/views/profile/userManager/Role.vue"
import Label from "@/views/profile/userManager/Label.vue"

export default {
  name: "Profile",
  components: {
    NavBarFunc,
    ProfileInfo,
    TimeLine,
    Editor,
    Search,
    Upload,
    UserList,
    Permission,
    Role,
    Label
  },
  setup() {
    const tags = reactive([])
    const value = ref()
    const showManager = JSON.parse(localStorage.getItem("user")).Id === 'admin';

    const editIcon = Edit
    const article = reactive({
      userId: String,
      title: String,
      InnerText: "",
      tag: String,
      star: 0,
      watcher: 0,
    })

    onMounted(() => {
      getTags().then(res => {
        res.data.data.forEach(element => {
          if (element.Id != "1") {
            tags.push(element)
          }
        });
      })
    })

    // 发布文章
    const submit = () => {
      publish()
    }
    const onTagChange = (val) => {
      console.log(val)
    }

    // 文章发表
    const publish = () => {
      if (article.title === "" || article.title == null) {
        ElMessage.warning("文章标题不能为空")
        return
      }
      if (article.InnerText === "" || article.InnerText == null) {
        ElMessage.warning("文章内容不能为空")
        return
      }
      let item = localstorage.getItemObject("user");
      article.userId = item.Id
      article.tag = value.value

      POSTA("/Article/PublishArticle", article, {}).then(res => {
        ElMessage.success("发表文章成功")
        // 刷新页面
        location.reload()
      }).catch(err => {
        ElMessage.error("发表文章出错啦，请重试")
      })
    }

    const inputText = (value) => {
      // 将文章标题进行赋值
      article.title = value
    }
    // 进行保存文章内容到 article 对象中
    const articleText = (value, render) => {
      article.InnerText = render
      // article.htmlContent = render
    }

    // 侧边标签切换提示
    const switchPane = (activeName, oldName) => {
    }

    return {
      editIcon,
      switchPane,
      inputText,
      articleText,
      submit,
      Upload,
      showManager,
      tags,
      value,
      onTagChange
    }
  }
}
</script>

<style lang="scss" scoped>
.el-tab-pane {
  padding-top: 30px;
}
</style>